<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/font_3687491_n8u9j4yyj5j/iconfont.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 顶部导航 -->
    <div class="TopBar">
        <div class="warp cont">
            <div class="left">
                广东<span class="iconfont icon-sanjiaoxing_shang"></span>
            </div>
            <ul>
                <li>请登录</li>
                <span>/</span>
                <li>注册</li>
                <span>/</span>
                <li>我的订单</li>
                <span>/</span>
                <li>我的特卖<span class="iconfont icon-sanjiaoxing_shang"></span></li>
                <span>/</span>
                <li>会员俱乐部<span class="iconfont icon-sanjiaoxing_shang"></span></li>
                <span>/</span>
                <li>客服服务<span class="iconfont icon-sanjiaoxing_shang"></span></li>
                <span>/</span>
                <li>
                    <div></div>
                    手机版
                </li>
                <span>/</span>
                <li>更多<span class="iconfont icon-sanjiaoxing_shang"></span></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="Header">
        <div class="cont warp">
            <div class="left"></div>
            <ul>
                <li></li>
                <li></li>
                <li></li> |
                <li>
                    <div></div>
                    <span>我的购物袋</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="topNav">
        <div class="cont warp">
            <ul>
                <li>首页</li>
                <li>唯品国际</li>
                <li>母婴</li>
                <li>家居家电</li>
                <li>男士</li>
                <li>美妆</li>
                <li>生活超市</li>
                <li>金融</li>
                <li>更多<span class="iconfont icon-sanjiaoxing_shang"></span></li>
            </ul>
            <div class="right">
                <div><span class="iconfont icon-fenlei1"></span>分类</div>
                <div><span class="iconfont icon-yugao"></span>预告</div>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <div class="chart">
            <ul class="ul-one" id="box">
                <li><img src="./images/banner.jpg" alt="" /></li>
                <li><img src="./images/banner.jpg" alt="" /></li>
                <li><img src="./images/banner.jpg" alt="" /></li>
                <li><img src="./images/banner.jpg" alt="" /></li>
            </ul>
            <ul class="ul-two" id="ul-box">
                <li>UA品牌钜献 全场6折起</li>
                <li>热辣沙 滩最高满198减40</li>
                <li>母婴冰点盛宴</li>
                <li>宝姿VIP大牌日 立抢红包</li>
            </ul>
        </div>
    </div>
    <!-- 左侧边栏 -->
    <div class="sidebar-left">
        <ul>
            <li>
                <span class="iconfont icon-jingxuan"></span>精选
            </li>
            <li>
                <span class="iconfont icon-nvzhuang"></span>女装
            </li>
            <li>
                <span class="iconfont icon-xiebao"></span>鞋包
            </li>
            <li>
                <span class="iconfont icon-nanshi"></span>男士
            </li>
            <li>
                <span class="iconfont icon-yundong"></span>运动
            </li>
            <li>
                <span class="iconfont icon-shipin"></span>饰品
            </li>
            <li>
                <span class="iconfont icon-meizhuang"></span>美妆
            </li>
            <li>
                <span class="iconfont icon-tongzhuangmuying"></span>母婴
            </li>
            <li>
                <span class="iconfont icon-jujia"></span>居家
            </li>
            <li>
                <span class="iconfont icon-guoji"></span>国际
            </li>
            <li>
                <span class="iconfont icon-jingxuan"></span>生活
            </li>
            <li>
                <span class="iconfont icon-yugao"></span>预告
            </li>
        </ul>
    </div>
    <!-- 右侧边栏 -->
    <div class="sidebar-right">
        <div class="cont">
            <ul>
                <li>
                    <div class="iconfont icon-zhanghao"></div>账号
                </li>
                <li>
                    <div class="iconfont icon-gouwudaizi_"></div>
                    <div>购物车</div>
                    <div>0</div>
                </li>
                <li class="iconfont icon-youhuiquan"></li>
                <li class="iconfont icon-shoucang"></li>
                <li class="iconfont icon-jingxuan"></li>
                <li class="iconfont icon-zuji"></li>

            </ul>
            <div class="bottom">
                <div class="iconfont icon-qianbi"></div>
                <div class="iconfont icon-dingbu"></div>
            </div>
        </div>

    </div>
    <!-- 热区 -->
    <div class="hot warp">
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
        </ul>
    </div>
    <!-- 新人优选 -->
    <div class="new warp">
        <div class="pic1"></div>
        <ul class="hot-ul">
            <li>
                <div></div>美妆馆
            </li>
            <li>
                <div></div>鞋包馆
            </li>
            <li>
                <div></div>男装馆
            </li>
            <li>
                <div></div>体用馆
            </li>
            <li>
                <div></div>母婴馆
            </li>
            <li>
                <div></div>国家馆
            </li>
            <li>
                <div></div>人气零食
            </li>
            <li>
                <div></div>更多分类
            </li>
        </ul>
        <div class="box">
            <div class="left-box">
                <ul>
                    <li>
                        <div></div>
                        连衣裙
                    </li>
                    <li>
                        <div></div>
                        省心套装
                    </li>
                    <li>
                        <div></div>
                        半身裙
                    </li>
                    <li>
                        <div></div>
                        百搭T恤
                    </li>
                </ul>
            </div>
            <div class="right-box">
                <ul>
                    <li>
                        <div></div>
                        人气彩妆
                    </li>
                    <li>
                        <div></div>
                        护肤套装
                    </li>
                    <li>
                        <div></div>
                        口碑面膜
                    </li>
                    <li>
                        <div></div>
                        清爽水乳
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 新鲜特卖 -->
    <div class="today warp">
        <div class="pic2"></div>
        <div class="box">
            <ul class="bigBox">
                <li>
                    <div class="bgBox"></div>
                    <div class="contBox">
                        <div class="top">
                            <div class="con-pic">
                                <div></div>
                                ￥1198
                            </div>
                            <div class="con-pic">
                                <div></div>
                                ￥1198
                            </div>
                            <div class="con-pic">
                                <div></div>
                                ￥1198
                            </div>
                        </div>
                        <box class="bottom">
                            <div class="bottom-left">

                            </div>
                            <div class="bottom-right">
                                进入专场
                            </div>
                        </box>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="./images/today2_logo.png" alt="">
                        <p>雅意新韵 至美绽放</p>
                        <p>购物即享折上8.5折优惠</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="./images/today2_logo.png" alt="">
                        <p>意式精选绅士的品格</p>
                        <p>满198藏40，上不封顶</p>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="./images/today2_logo.png" alt="">
                        <p>意式轻奢匠心品质</p>
                        <p>满498减100,上不封顶</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 女装品牌 -->
    <div class="woman warp">
        <div class="top">
            <img src="./images/woman_2ad.png" alt="">
            <div><span>全部女装品牌</span>
                <span class="iconfont icon-weibiaoti1"></span>
            </div>
        </div>
        <ul class="womanUl">
            <li>
                <img src="./images//woman1.jpg" alt="">
                <div>
                    <span></span>
                    购物满2件即享8.5折，满3件即享8折
                </div>
                <div class="bottomInfo">
                    <span>2.5</span>折起 拉夏贝尔旗下品牌女装专场
                    <span></span>
                    <span>剩18时</span>
                </div>
            </li>
            <li>
                <img src="./images//woman2.jpg" alt="">
                <div>
                    <span></span>
                    购物满2件即享8.5折，满3件即享8折
                </div>
                <div class="bottomInfo">
                    <span>0.5</span>折起 反季清仓-主格excZeOlOlZent女装专场

                    <span style="margin-left: 90px"></span>
                    <span>剩18时</span>
                </div>
            </li>
            <li>
                <img src="./images//woman2.jpg" alt="">
                <div class="bottomInfo">
                    <span>1.6</span>折起 玛丝菲尔Marisfrolg女装专场
                    <span style="margin-left: 165px"></span>
                    <span>剩18时</span>
                </div>
            </li>
            <li>
                <img src="./images//woman1.jpg" alt="">
                <div class="bottomInfo">
                    <span>1.7</span>折起 DAZZLE女装专场
                    <span style="margin-left: 240px"></span>
                    <span>剩18时</span>
                </div>
            </li>
        </ul>
        <div class="buttom">
            逛更多女装品牌 <span class="iconfont icon-xiala"></span>
        </div>
    </div>
    <!-- 广告栏 -->
    <div class="fashion">
        <div class="fashionBox">
            <img src="./images/fashion_peopel.jpg" alt="">
            <div class="one">
                <div class="two">
                    <img src="./images/fashion_logo.png" alt="">
                    <p>轻奢大牌 时尚臻品</p>
                    <div>进入频道 ></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 鞋包品牌 -->
    <div class="shoe warp">
        <div class="top">
            <img src="./images/shoe.png" alt="">
            <div><span>全部鞋包品牌</span>
                <span class="iconfont icon-weibiaoti1"></span>
            </div>
        </div>
        <ul class="womanUl">
            <li>
                <img src="./images/shoes1.jpg" alt="">
                <div>
                    <span></span>
                    满198减40，上不封顶
                </div>
                <div class="bottomInfo">
                    <span>1.5</span>折起 涉趣selftrend女鞋专场剩4天
                    <span style="margin-left: 165px"></span>
                    <span>剩18时</span>
                </div>
            </li>
            <li>
                <img src="./images/shoes2.jpg" alt="">
                <div>
                    <span></span>
                    满198减40，上不封顶
                </div>
                <div class="bottomInfo">
                    <span>1.4</span>折起 优哈.优哈HOW.R.U箱包专场剩2天

                    <span style="margin-left: 100px"></span>
                    <span>剩18时</span>
                </div>
            </li>
            <li>
                <img src="./images/shoes2.jpg" alt="">
                <div class="bottomInfo">
                    <span>1</span>折起 卡洛黛茜CORALDAISY皮具专场
                    <span style="margin-left: 130px"></span>
                    <span>剩18时</span>
                </div>
            </li>
            <li>
                <img src="./images//shoes1.jpg" alt="">
                <div class="bottomInfo">
                    <span>1.3</span>折起 ZGR女鞋专场
                    <span style="margin-left: 240px"></span>
                    <span>剩18时</span>
                </div>
            </li>
        </ul>
        <div class="buttom">
            逛更多鞋包品牌 <span class="iconfont icon-xiala"></span>
        </div>
    </div>

</body>

</html>